<template>
  <div class="app-container">

    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="demo-input-suffix">
            <el-input
              placeholder="账号"
              prefix-icon="el-icon-search"
              v-model="username"
              @blur="Select"
            >
            </el-input>
          </div>


        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="demo-input-suffix">
            <el-input
              placeholder="姓名"
              prefix-icon="el-icon-search"
              v-model="real_name">
            </el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="demo-input-suffix">
            <el-input
              placeholder="手机号"
              prefix-icon="el-icon-search"
              v-model="mobile"
              @blur="Select"
            >
            </el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">

        <el-select v-model="roles" multiple placeholder="用户类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-button type="primary">查询</el-button>
        </div>
      </el-col>


    </el-row>

    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="username"
        label="账号"
        width="200">
      </el-table-column>
      <el-table-column
        prop="real_name"
        label="姓名"
        width="200">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号"
        width="200">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleDisable(scope.$index, scope.row.id)">禁用
          </el-button>  <!-- row.id 需要后端传了id 可以直接获取这一行的id -->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row :gutter="20">
      <el-col :span="4" :offset="6">
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="dataCount"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </el-col>

    </el-row>


  </div>
</template>

<script>
import {getEdit, getList} from '@/api/organization'
import axios from "axios";
import request from "@/utils/request";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      //分页
      dataCount: null,
      currentPage4: 4,
      //角色
      roles: null,
      //查询相关
      username: null,
      mobile: null,
      real_name: null,
      list: null, // 这里是后端传来的所有表格数据
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  computed: {
    selectParams() { // 当下面的属性变化时，本计算属性会重新计算，得到一个params对象，用于后续传递给axios
      return {
        username__icontains: this.username || '',
        mobile__icontains: this.mobile || '',
        real_name__icontains: this.real_name || '',
      };
    },
  },
  watch: {
    selectParams() { // 监听计算属性，当计算属性发生变化向后端发送请求
      getList(this.selectParams).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    }
  },
  methods: {
    handleDelete(index, id) {

    },
    handleDisable(index, id) {
      let data = {
        id: id,
        is_active: false
      }
      getEdit(id, data).then(response => {
        let msg = response.msg
        this.$message(msg);
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data
        console.log(this.list)
        // this.dataCount = response.data.count
        // console.log(this.dataCount)
        this.listLoading = false
      })
    },
    Select() { // 输入框的blu事件绑定这个函数，会获取计算数据的查询条件，添加到axios的params中向后端发送请求  // Params需要是一个对象
      getList(this.selectParams).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
  },
}
</script>

<style scoped>
</style>
